<template>
    <div id="calendar">
        <div class="card-container margin0">
            <div class="content">
                <div class="choose-head">
                    <div class="choose-year">{{ currentYear }} 年节假日信息</div>
                    <div class="choose-search">
                        <!-- <span class>{{ currentYear }}</span> -->
                        <!-- <el-input class="choose-input" v-model.trim="currentYear" placeholder="">
                    {{ currentYear }}</el-input> -->
                        <!-- <el-button @click="handleChangePickPre(currentYear)">&lt;</el-button>
                <el-button @click="handleChangePickNext(currentYear)">&gt;</el-button> -->
                    </div>
                </div>
                <div v-for="item in calendarDataList" :key="item.month" class="calendarList">
                    <div class="title-month">{{ item.month }}</div>
                    <!-- 星期 -->
                    <ul class="weekdays">
                        <li>一</li>
                        <li>二</li>
                        <li>三</li>
                        <li>四</li>
                        <li>五</li>
                        <li>六</li>
                        <li>日</li>
                    </ul>
                    <!-- 日期 -->
                    <ul class="days">
                        <!-- 空格 -->
                        <li v-for="item1 in item.xq" :key="item.month + '-day' + item1"></li>
                        <!-- 列表 -->
                        <li v-for="(item1, index) in item.list" :key="item.month + '-' + index">
                            <div v-if="item1.type == 1">
                                <span class="tag">休</span>
                                <span class="active">{{ item1.name
                                }}</span>
                            </div>
                            <div v-else>
                                <span>{{
                                    item1.name
                                }}</span>
                            </div>

                        </li>
                    </ul>
                </div>
            </div>

        </div>
    </div>
</template>
<script>
import { getcalendarList } from '@/api/weather/index.js'
export default {
    name: "vacationApply",
    data() {
        return {
            currentYear: new Date().getFullYear(), //年
            typeColour: "", //
            dayChecked: "",
            calendar: [
            ],
            calendarDataList: [
                {
                    month: "一月",
                    months: 1,
                    day: 0,
                    xq: 0,
                    list: [],
                },
                {
                    month: "二月",
                    months: 2,
                    day: 0,
                    xq: 0,
                    list: [],
                },
                {
                    month: "三月",
                    months: 3,
                    day: 0,
                    xq: 0,
                    list: [],
                },
                {
                    month: "四月",
                    months: 4,
                    day: 0,
                    xq: 0,
                    list: [],
                },
                {
                    month: "五月",
                    months: 5,
                    day: 0,
                    xq: 0,
                    list: [],
                },
                {
                    month: "六月",
                    months: 6,
                    day: 0,
                    xq: 0,
                    list: [],
                },
                {
                    month: "七月",
                    months: 7,
                    day: 0,
                    xq: 0,
                    list: [],
                },
                {
                    month: "八月",
                    months: 8,
                    day: 0,
                    xq: 0,
                    list: [],
                },
                {
                    month: "九月",
                    months: 9,
                    day: 0,
                    xq: 0,
                    list: [],
                },
                {
                    month: "十月",
                    months: 10,
                    day: 0,
                    xq: 0,
                    list: [],
                },
                {
                    month: "十一月",
                    months: 11,
                    day: 0,
                    xq: 0,
                    list: [],
                },
                {
                    month: "十二月",
                    months: 12,
                    day: 0,
                    xq: 0,
                    list: [],
                },
            ],
            vacation: "",
        };
    },
    created: function () {
        this.handleChangeInitData();
        // this.getCurrentDay();
    },
    methods: {
        getCurrentDayCalendar(year) {
            let that = this;
            getcalendarList({ year }).then((response) => {
                this.calendar = response.data.filter(item => {
                    return item.isNotWork == 1
                });
                for (let i = 0; i < that.calendarDataList.length; i++) {
                    that.calendarDataList[i].list = [];
                    // 获取每月天数
                    let thisDate = new Date(year, that.calendarDataList[i].months, 0);
                    that.calendarDataList[i].day = thisDate.getDate(); //赋值-获取天数
                    for (var j = 1; j <= that.calendarDataList[i].day; j++) {
                        //1.拿到了list的天数
                        that.calendarDataList[i].list.push({
                            name: j < 10 ? '0' + j : j,
                            type: 0,
                        });
                    }

                    for (var h = 0; h < that.calendarDataList[i].list.length; h++) {
                        // 年月日
                        that.vacation =
                            year +
                            "-" +
                            (that.calendarDataList[i].months < 10 ? '0' + that.calendarDataList[i].months : that.calendarDataList[i].months) +
                            "-" +
                            that.calendarDataList[i].list[h].name;
                        // 用12月的年月日和calendar中年月日对比
                        for (let k = 0; k < that.calendar.length; k++) {
                            // 如果相等结束循环
                            if (this.calendar[k].date == that.vacation) {
                                that.calendarDataList[i].list[h].type = 1;
                                break;
                            } else {
                                that.calendarDataList[i].list[h].type = 0;
                            }
                        }
                    }
                    // 获取前月的第一天是星期几，空几格
                    let date = new Date(year, this.calendarDataList[i].months - 1, 0);
                    this.calendarDataList[i].xq = date.getDay();
                }
            });


        },

        // js获取每个月有多少天
        handleChangeInitData: function (year) {
            if (year != undefined) {
                this.currentYear = year;
                this.getCurrentDayCalendar(year);
            } else {
                let date = new Date();
                let year = date.getFullYear();
                this.getCurrentDayCalendar(year);
            }
        },

        // 点击年
        handleChangePickPre: function (year) {
            year--;
            this.currentYear = year;
            this.handleChangeInitData(year);
        },
        handleChangePickNext: function (year) {
            year++;
            this.currentYear = year;
            this.handleChangeInitData(year);
        },
    },
}
</script>

<style lang="scss" scoped>
#calendar {
    width: 100%;
    height: 100%;
    padding: 20px;
}

.margin0 {
    margin-top: 0;
    padding: 20px;
}

.content {
    font-size: 12px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 auto;
    padding: 0 20px;
}

.title-month {
    color: #ffffff;
    font-size: 18px;
    text-align: center;

    border-top-left-radius: 8px;
    border-bottom-right-radius: 8px;
    // background-color: #000080;
    background-image: linear-gradient(-225deg, rgba(105, 130, 128, 1) 0%, rgb(105, 130, 128) 100%);
}

.calendarList {
    width: 24%;
}

.choose-head {
    width: 100%;
    padding: 20px;
    padding-top: 0;
    color: #f0f0f0;
    // background-color: #f0f0f0;
}

.choose-year {
    text-align: center;
    font-size: 25px;
}

.choose-search {
    display: flex;
    flex-flow: flex-end;
    justify-content: flex-end;
}

.choose-input {
    width: 100px !important;
}

.month {
    width: 100%;
    color: #333333;
}

.month ul {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    height: 35px;
}

.year-month {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 10px;
}

.choose-month {
    text-align: center;
    font-size: 12px;
}

.arrow {
    padding: 15px;
    color: #999999;
}

.month ul li {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.weekdays {
    margin: 0;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    color: #fff;
    justify-content: space-around;
}

.weekdays li {
    display: inline-block;
    width: 13.6%;
    text-align: center;
}

.days {
    padding: 10px;
    background: rgba(0, 0, 0, 0.24);
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}

.days li {
    position: relative;
    display: inline-block;
    width: 14.2%;
    text-align: center;
    padding-bottom: 4px;
    padding-top: 10px;
    font-size: 12px;
    color: #fff;
}

.days li .active {
    padding: 6px 6px;
    // background: green;
    color: #ff4444;
}

.days li .other-month {
    padding: 5px;
    color: gainsboro;
}

.days li:hover>span>span {
    padding: 6px 6px;
    background: #e1e1e1;
    color: #fff;
}

.tag {
    position: absolute;
    right: -4px;
    top: -4px;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    color: #fff;
    font-size: 12px;
    background-color: #ff4444;
}
</style>